<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib/taglib.jsp" %>

<!DOCTYPE>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${ctxStatic }/css/clientList.css?v=${timestamp}"  />
	<title>客户${client.id == null?'添加':'修改' }</title>
	<link rel="stylesheet" href="${ctxStatic }/js/jQuery-Validation-Engine/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> 
</head>
<body>
	<center>
		<h1>客户${client.id == null?'添加':'修改' }</h1>
		<form action="${ctx }/clientSaveServlet" method="post" id="inputForm">
		<table class="tableClass" border="1px" cellpadding="0px" cellspacing="0px" >
		<c:if test="${client.id != null  }">
			<tr>
				<th>客户id</th>
				<td align="center">${client.id }</td>
				<td align="center"><input name="id" value="${client.id }" readonly="readonly"></td>
			</tr>	
		</c:if>	
			<tr>
				<th>名称</th>
				<td>${client.name }</td>
				<td align="center"><input name=name value="${client.name }" class="validate[required,maxSize[50]]"></td>
			</tr>
			<tr>
				<th>联系人</th>
				<td>${client.contact }</td>
				<td align="center"><input name="contact" value="${client.contact }" class="validate[required,maxSize[5]]"></td>
			</tr>
			<tr>	
				<th>电话</th>
				<td>${client.phone }</td>
				<td align="center"><input name="phone" value="${client.phone }" class="validate[required,maxSize[20]]"></td>
			</tr>
			<tr>
				<th>邮箱</th>
				<td>${client.email }</td>
				<td align="center"><input name="email" value="${client.email }" class="validate[custom[email],maxSize[100]]"></td>
			</tr>
			<tr>
				<th>备注</th>
				<td>${client.remarks }</td>
				<td align="center">
					<textarea rows="3" name="remarks" placeholder="200字以内" class="validate[maxSize[200]]">${client.remarks }</textarea>	
				</td>
			</tr>
			<tr>	
				<th>添加时间</th>
				<td>${client.createDate }</td>
				<td align="center">
					<input name="createDate" value="${client.createDate }" class="validate[required,custom[dateFormat]]" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',isShowClear:false,readOnly:true})">
				</td>
			</tr>
			<tr>	
				<td>
					<button type="button" id="button_reset">重置</button>
				</td>
				<td colspan="2" align="center">
					<button type="button" id="button_submit">保存</button>
				</td>
			</tr>
		</table>
		</form>
		<h2><button type="button" onclick="window.history.go(-1)">返回</button></h2>
	</center>
	<script type="text/javascript" src="${ctxStatic }/js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="${ctxStatic }/js/chapter.js?v=${timestamp}"></script>
	<script type="text/javascript" src="${ctxStatic }/js/global.js?v=${timestamp}"></script>
	<script type="text/javascript" src="${ctxStatic }/js/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctxStatic }/js/jQuery-Validation-Engine/js/jquery.validationEngine.js"></script>
	<script type="text/javascript" src="${ctxStatic }/js/jQuery-Validation-Engine/js/languages/jquery.validationEngine-zh_CN.js"></script>
	
	<script type="text/javascript">
		$(function(){
			
			$("#inputForm").validationEngine({
				binded:false,
				onFieldSuccess:function(field){
					 console.info(field[0]);					
				}
			});
			
			
			$("#button_submit").click(function(){
				var data=$("#inputForm").serialize();
				if($("#inputForm").validationEngine('validate')){
				 	$("#inputForm").submit();
				}
			});
			
			$("#button_reset").click(function(){
				$("#inputForm")[0].reset();
			});
		});
	</script>
</body>
</html>